<template>
  <view class="container">
    <view class="address-list">
      <view
        class="address-item"
        v-for="(item, index) in addressList"
        :key="index"
        @click="selectAddress(item)"
      >
        <view class="address-info">
          <view class="user-info">
            <text class="name">{{ item.name }}</text>
            <text class="phone">{{ item.phone }}</text>
            <text class="tag" v-if="item.isDefault">默认</text>
          </view>
          <view class="address-detail">
            {{ item.province }}{{ item.city }}{{ item.district
            }}{{ item.detail }}
          </view>
        </view>
        <view class="address-edit" @click.stop="editAddress(item)">
          <up-icon name="edit-pen" size="20" color="#999"></up-icon>
        </view>
      </view>
    </view>

    <view class="add-btn">
      <up-button type="primary" @click="addAddress">新增地址</up-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

interface AddressItem {
  id: number;
  name: string;
  phone: string;
  province: string;
  city: string;
  district: string;
  detail: string;
  isDefault: boolean;
}

const addressList = ref<AddressItem[]>([]);

onLoad(() => {
  loadAddressList();
});

function loadAddressList() {
  // 模拟数据，实际项目中替换为API请求
  addressList.value = [
    {
      id: 1,
      name: "张三",
      phone: "13800138000",
      province: "北京市",
      city: "北京市",
      district: "朝阳区",
      detail: "建国路88号",
      isDefault: true,
    },
    {
      id: 2,
      name: "李四",
      phone: "13900139000",
      province: "上海市",
      city: "上海市",
      district: "浦东新区",
      detail: "张江高科技园区",
      isDefault: false,
    },
  ];
}

function goBack() {
  uni.navigateBack();
}

function addAddress() {
  uni.navigateTo({
    url: "/pages/user/address/form",
  });
}

function editAddress(item: AddressItem) {
  uni.navigateTo({
    url: `/pages/user/address/form?id=${item.id}`,
  });
}

function selectAddress(item: AddressItem) {
  // 选择地址逻辑，根据业务需求实现
  uni.$emit("selectAddress", item);
  uni.navigateBack();
}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 100rpx;
}

.address-list {
  padding: 20rpx;

  .address-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

    .address-info {
      flex: 1;

      .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 15rpx;

        .name {
          font-size: 30rpx;
          font-weight: bold;
          margin-right: 20rpx;
        }

        .phone {
          font-size: 28rpx;
          color: #666;
          margin-right: 20rpx;
        }

        .tag {
          font-size: 24rpx;
          color: #fff;
          background-color: #3c9cff;
          padding: 4rpx 10rpx;
          border-radius: 6rpx;
        }
      }

      .address-detail {
        font-size: 28rpx;
        color: #666;
        line-height: 1.5;
      }
    }

    .address-edit {
      width: 60rpx;
      text-align: center;
    }
  }
}

.add-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}
</style>
